<template>
	<public-view navType="secondCar" navTitle="分类" :allClassBtn="false">
		<view class="content">
			<view class="" style="margin-bottom: 30rpx;">
				<top-select :list="top_tab" @backData="showPopup"></top-select>
			</view>
			<view class="type-tab-list flex a-i-c">
				<block v-for="(item, index) in tab_type_list" :key="index">
					<view class="item flex j-c-c" :class="type_id === item.id?'active':'unacitve'" @click="changeTypeID(item)">
						{{item.name}}
						<view class="bottom" v-if="type_id === item.id"></view>
					</view>
				</block>
			</view>
			<block v-for="(item, index) in car_list" :key="index">
				<view class="items-box flex a-i-c" @click="goToCarInfo(item)">
					<image class="good-icon" :src="item.images[0]" mode=""></image>
					<view class="good-info-box">
						<view class="name f-s-30 f-w-b">
							{{item.title||""}}
						</view>
						<view class="subtitle f-s-24 color-999">
							{{item.desc||""}}
						</view>
						<view class="bottom flex a-i-c j-c-b w-100">
							<view class="" style="color: #EE8300;">
								<text class="f-w-b" style="font-style: italic;">{{item.first_price||0}}-{{item.last_price||0}}</text><text class="f-s-22 f-w-4">万</text>
							</view>
							<view class="right all-center color-2567F3 f-s-24" @click.stop="$callPhone(item.mobile)">
								联系车主
							</view>
						</view>
					</view>
				</view>
			</block>
			<picker-type :pickerType="pickerType" ref="showpikcer" @classBack="classBack"></picker-type>
		</view>
	</public-view>
	
</template>

<script>
	import {goTo} from "@/nav.js"
	import topSelect from "@/components/myComponents/topSelect.vue"
	import pickerType from "@/components/myComponents/pickerViewClass.vue"
	export default {
		components:{
			'top-select':topSelect,
			"picker-type":pickerType
		},
		data() {
			return {
				type_id:"1",
				tab_type_list:[
					{
						id:'1',
						name:"买车"
					},
					{
						id:'0',
						name:"卖车"
					}
				],
				top_tab:[
					{
						id:'1',
						is_active:true,
						title:"品牌",
						children_name:""
					},
					{
						id:'2',
						is_active:true,
						title:"车型",
						children_name:""
					},
					{
						id:'3',
						is_active:true,
						title:"车龄",
						children_name:""
					},
					{
						id:'4',
						is_active:true,
						title:"里程",
						children_name:""
					},
					{
						id:'5',
						is_active:true,
						title:"售价区间",
						children_name:""
					}
				],
				pickerType:'2',
				model:'',
				age:"",
				car_list:[],
				brand:"",
				min_money:"",
				max_money:"",
				min_mileage:"",
				max_mileage:""
			};
		},
		onShow() {
			this.getSecondCarList()
		},
		computed:{
			keywords(){
				return this.$store.state.nav_keywords || ""
			}
		},
		watch:{
			"$store.state.nav_keywords"(nval,oval){
				this.getSecondCarList()
			}
		},
		methods:{
			goTo,
			changeTypeID(item){
				this.type_id = item.id
				this.car_list = []
				this.getSecondCarList()
			},
			goToCarInfo(item){
				this.$store.commit("changeSecondCarInfo",JSON.stringify(item))
				this.goTo({url:'/pages/secondCar/secondCarInfo'})
			},
			classBack(e){
				if(this.pickerType === '2'){
					this.model = e.id
					this.top_tab[this.top_tab_index].children_name = e.name
				}
				if(this.pickerType === '4'){
					this.age = e.age
					this.top_tab[this.top_tab_index].children_name = `0-${e.age}年内`
				}
				if(this.pickerType === '5'){
					this.top_tab[this.top_tab_index].children_name = `${e.min}-${e.max}`
					this.min_money = e.min
					this.max_money = e.max
				}
				if(this.pickerType === '6'){
					this.top_tab[this.top_tab_index].children_name = `${e.min}-${e.max}`
					this.min_mileage = e.min
					this.max_mileage = e.max
				}
				if(this.pickerType === '7'){
					this.brand = e.id
					this.top_tab[this.top_tab_index].children_name = e.name
				}
				this.car_list = []
				this.getSecondCarList()
			},
			showPopup(o){
				console.log(o)
				if(o.item.id === '2' || o.item.id ==='5'){
					this.pickerType = o.item.id
				}
				if(o.item.id ==='3'){
					this.pickerType = '4'
				}
				if(o.item.id ==='4'){
					this.pickerType = '6'
				}
				if(o.item.id ==='1'){
					this.pickerType = '7'
				}
				this.top_tab_index = o.index
				this.$refs.showpikcer.show()
			},
			getSecondCarList(){
				let that = this
				console.log("content/lorry")
				let second_choose_info = that.$store.state.second_choose_info
				that.util.postRequest({
					url:"v1/content/lorry",
					data:{
						type:that.type_id,
						keyword:that.keywords,
						class:second_choose_info.class_id,
						model:that.model,
						brand:that.brand,
						age:{"start":0,"end":Number(that.age)||"5"},
						price:{"start":that.min_money||0,"end":that.max_money||'10000'},
						mileage:{"start":that.min_money||0,"end":that.max_money ||'10000'}
					}
				}).then(res=>{
					console.log(res,"content/lorry")
					that.car_list = res.data.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.type-tab-list{
		width: 100%;
		padding: 0 32upx;
		margin-bottom: 32upx;
		.item{
			position: relative;
			margin-right: 32upx;
			.bottom{
				width: 38upx;
				height: 4upx;
				background: #2567F3;
				position: absolute;
				bottom: -10upx;
				
			}
		}
		.active{
			line-height: 42upx;
			font-weight: bold;
			font-size: 30upx;
		}
		.unacitve{
			font-size: 28upx;
			color: #999999;
			line-height: 40upx;
		}
	}
	.items-box{
		width: 100%;
		padding: 24upx;
		background: #FFFFFF;
		box-shadow: 0px 8upx 16upx rgba(0, 0, 0, 0.05);
		border-radius: 16upx;
		margin-bottom: 20rpx;
		.good-info-box{
			width: 380upx;
			.bottom{
				// width: calc(100% - 224upx - 22upx - 24upx);
				.right{
					background: #F1F5FE;
					border: 1upx solid #2567F3;
					border-radius: 8upx;
					width: 104upx;
					height: 48upx;
				}
			}
			.subtitle{
				line-height: 34upx;
				margin-bottom: 8upx;
			}
			.name{
				line-height: 42upx;
				margin-bottom: 4upx;
			}
		}
		.good-icon{
			width: 224upx;
			height: 168upx;
			margin-right: 22upx;
		}
	}
	.top-select-view{
		width: 100%;
		margin-bottom: 36upx;
		.item{
			.icon{
				width: 20upx;
				height: 20upx;
				margin-left: 8upx;
			}
		}
	}
	.content{
		width: 750upx;
		padding: 36upx 24upx;
	}
</style>
